<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom:20px" @click="addList">添加</el-button>

      <el-table
        :header-cell-style="{background:'#eee'}"
        v-loading="loading"
        :data="tableData"
        style="width: 100%;margin-bottom:20px"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item
                v-for="item in props.row.win_info"
                :key="'win'+item.id"
                :label="item.type==1?'普通奖励:':'特殊奖励:'"
              >
                <div v-if="item.win_type==1">奖励类型：积分</div>
                <div v-if="item.win_type==2">奖励类型：优惠券</div>
                <div v-if="item.win_type==3">奖励类型：商品</div>
                <div v-if="item.win_type==4">奖励类型：星石</div>
                <div v-if="item.win_type==4">星石数量：{{item.data}}</div>
                <div v-if="item.win_type==2">优惠券名：{{item.coupon_info.title}}</div>
                <div v-if="item.win_type==3" style="display:flex">
                  <div>商品信息:</div>
                  <div style="margin-left:10px">
                    <div>
                      <el-popover placement="top-start" title trigger="hover">
                        <img :src="item.goods_info.img" alt style="max-width:250px" />
                        <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                        <el-avatar
                          slot="reference"
                          shape="square"
                          :size="50"
                          fit="scale-down"
                          :src="item.goods_info.img"
                        ></el-avatar>
                        <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                        />-->
                      </el-popover>
                    </div>
                    <div>名称：{{item.goods_info.goods_name}}</div>
                    <div>价格：{{item.goods_info.price}}</div>
                  </div>
                </div>
                <div v-if="item.win_type==1">积分数量：{{item.data}}</div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="等级" align="center" prop="grade"></el-table-column>
        <el-table-column label="经验" align="center" prop="experience"></el-table-column>
        <el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
        <el-table-column label="编辑时间" align="center" prop="update_time"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleEdite(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 添加、编辑抽屉 -->
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="等级" prop="grade">
          <el-input v-model="form.grade" style="width:260px"></el-input>
        </el-form-item>
        <el-form-item label="经验" prop="experience">
          <el-input v-model="form.experience" style="width:260px"></el-input>
        </el-form-item>
        <el-form-item label="奖励" prop="win_info">
          <div v-for="(item,index) in form.win_info" :key="'form'+index">
            <div>{{item.type==1?"普通奖励":"特殊奖励"}}</div>
            <el-select v-model="item.win_type" style="width:260px" placeholder="请选择奖励">
              <el-option label="积分" value="1"></el-option>
              <el-option label="优惠券" value="2"></el-option>
              <el-option label="奖品" value="3"></el-option>
              <el-option label="星石" value="4"></el-option>
            </el-select>
            <el-input
              v-if="item.win_type==1"
              v-model="item.data"
              style="width:260px;margin-right:10px;margin-top:10px"
              placeholder="请输入积分数量"
            ></el-input>
            <el-button
              style="margin:0 15px"
              v-if="item.win_type==2"
              type="primary"
              @click="chooseCoupon(index)"
            >选择优惠券</el-button>
            <el-tag
              type="success"
              v-if="item.win_type==2&&item.coupon_id"
            >{{item.coupon_info.title}}</el-tag>
            <el-button
              style="margin:0 15px"
              v-if="item.win_type==3"
              type="primary"
              @click="chooseReward(index)"
            >选择奖品</el-button>
            <el-tag
              type="success"
              v-if="item.win_type==3&&item.goods_id"
            >{{item.goods_info.goods_name}}</el-tag>
            <el-input
              v-if="item.win_type==4"
              v-model="item.data"
              style="width:260px;margin-right:10px;margin-top:10px"
              placeholder="请输入星石数量"
            ></el-input>
          </div>
          <el-button type="primary" style="margin-top:20px" @click="addReward">新增特殊奖励</el-button>
          <el-button style="margin-top:20px" @click="delReward">删除特殊奖励</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 优惠券弹出层 -->
    <el-dialog
      title="选择优惠券"
      :visible.sync="coupondialogVisible"
      width="60%"
      :before-close="couponhandleClose"
    >
      <el-card class="box-card">
        <div class="query-card">
          <!-- <el-row type="flex" align="middle">
          <el-col :span="12">-->
          <div class="grid-content bg-purple search">
            <el-form ref="couponquery" :model="couponquery" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="优惠券名称">
                <i slot="label" class="el-icon-search" style="font-size:20px"></i>
                <el-input style="width:260px" v-model="couponquery.keywords" placeholder="请输入优惠券名称"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0px" label="分类">
                <el-select style="width:260px" v-model="couponquery.type" placeholder="请选择优惠券分类">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="满减" value="1"></el-option>
                  <el-option label="立减" value="2"></el-option>
                  <el-option label="折扣" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="couponqueryAsk">查询</el-button>
            <el-button @click="couponqueryReset">重置</el-button>
          </div>
        </div>
      </el-card>
      <!-- 表格 -->
      <el-card class="box-card">
        <el-table
          v-loading="couponloading"
          :data="coupontableData"
          :header-cell-style="{background:'#eee'}"
          @row-click="couponhandleSelectionChange"
          border
          style="width: 100%;margin-bottom: 20px;"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio v-model="couponid" :label="scope.row.id">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" width="50" label="ID"></el-table-column>
          <el-table-column align="center" prop="title" label="名称"></el-table-column>
          <el-table-column align="center" label="可用盲盒" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.box_id==0">全部</div>
              <div v-else v-for="item in scope.row.box_name" :key="item">{{item}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发放方式">
            <template slot-scope="scope">
              <div v-if="scope.row.lq_type==1">后台发放</div>
              <div v-else>待定</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type==1">满减</div>
              <div v-if="scope.row.type==2">立减</div>
              <div v-if="scope.row.type==3">折扣</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="金额">
            <template slot-scope="scope">
              <div v-if="scope.row.type==3">-</div>
              <div v-if="scope.row.type!=3">{{scope.row.money}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="折扣">
            <template slot-scope="scope">
              <div v-if="scope.row.type==3">{{scope.row.discount}}</div>
              <div v-if="scope.row.type!=3">-</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="满多少可用">
            <template slot-scope="scope">
              <div v-if="scope.row.type==1">{{scope.row.m_money}}</div>
              <div v-if="scope.row.type!=1">-</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="day_num" label="几天过期"></el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="couponcurrentPage"
            :total="coupontotal"
            @current-change="couponcurrentChange"
          ></el-pagination>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="couponInfo">确 定</el-button>
        <el-button @click="coupondialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 奖品弹出层 -->
    <el-dialog
      title="选择奖品"
      :visible.sync="rewarddialogVisible"
      width="60%"
      :before-close="rewardhandleClose"
    >
      <!-- 搜索 -->
      <el-card class="box-card">
        <div class="query-card">
          <el-form ref="rewardquery" :model="rewardquery" label-width="100px">
            <el-form-item style="margin-bottom:0px" label="奖品名称">
              <i slot="label" class="el-icon-search" style="font-size:20px"></i>
              <el-input style="width:260px" v-model="rewardquery.keywords" placeholder="请输入奖品名称"></el-input>
            </el-form-item>
            <el-form-item label="价格区间">
              <el-input v-model="rewardquery.lowPrice" style="width:100px" placeholder="低"></el-input>-
              <el-input v-model="rewardquery.heightPrice" style="width:100px" placeholder="高"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="奖品分类">
              <el-cascader
                v-model="rewardquery.class_id"
                :options="options"
                :props="{ checkStrictly: true,value:'id',label:'class_name' }"
                placeholder="请选择分类"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item style="margin-bottom:0px">
              <el-button type="primary" @click="rewardqueryAsk">筛选</el-button>
              <el-button @click="rewardqueryReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!-- 表格 -->
      <el-card class="box-card">
        <el-table
          @sort-change="rewardsortChange"
          :data="rewardtableData"
          :header-cell-style="{background:'#eee'}"
          @row-click="rewardhandleSelectionChange"
          border
          v-loading="rewardloading"
          style="width: 100%;margin-bottom: 20px;"
        >
          <el-table-column align="center" width="55">
            <template slot-scope="scope">
              <el-radio v-model="rewardid" :label="scope.row.id">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id" label="ID"></el-table-column>
          <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
          <el-table-column align="center" label="奖品图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.img" alt style="max-width:150px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.img"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="class_name" label="分类"></el-table-column>
          <el-table-column align="center" prop="y_price" label="成本">
            <template slot-scope="scope">
              <div>{{scope.row.y_price}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="价格" sortable="custom">
            <template slot-scope="scope">
              <div>{{scope.row.price}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="预售/现货">
            <template slot-scope="scope">
              <div v-if="scope.row.type==1">预售</div>
              <div v-if="scope.row.type==2">现货</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="是否参与合成材料">
            <template slot-scope="scope">
              <div v-if="scope.row.is_compound==1">可以</div>
              <div v-if="scope.row.is_compound==0">不可以</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="compound_price" label="合成数值">
            <template slot-scope="scope">
              <div>{{scope.row.compound_price}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="is_by" label="是否包邮">
            <template slot-scope="scope">
              <div v-if="scope.row.is_by==1">是</div>
              <div v-if="scope.row.is_by==0">否</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="rewardcurrentPage"
            :total="rewardtotal"
            @current-change="rewardcurrentChange"
          ></el-pagination>
        </div>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rewardInfo">确 定</el-button>
        <el-button @click="rewarddialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { warList, addWarList, editWarList } from "@/api/war";
import { couponList } from "@/api/coupon";
import { parseTime } from "@/utils/index";
import { categoryList } from "@/api/product";
import { boxRewardList, boxRewardTypeList } from "@/api/boxreward";

export default {
  name: "WarList",
  data() {
    return {
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      loading: false,
      //   添加编辑抽屉
      drawer: false,
      direction: "rtl",
      title: "添加",
      form: {
        grade: "",
        experience: "",
        win_info: [
          {
            type: 1,
            win_type: "",
            goods_id: "",
            data: "",
            coupon_id: ""
          },
          {
            type: 2,
            win_type: "",
            goods_id: "",
            data: "",
            coupon_id: ""
          }
        ]
      },
      rules: {
        grade: [{ required: true, message: "请填写等级", trigger: "blur" }],
        experience: [
          { required: true, message: "请填写经验", trigger: "blur" }
        ],
        win_info: [{ required: true, message: "请选择奖品", trigger: "blur" }]
      },
      //   选择优惠券弹出层
      coupondialogVisible: false,
      theIndex: "",
      // 分页数据
      coupontotal: 0,
      couponcurrentPage: 1,
      couponpageSize: 10,
      //query
      couponquery: {
        keywords: "",
        type: "0"
      },
      coupontableData: [],
      couponloading: false,
      couponid: "",
      coupondetail: "",
      //   选择奖品弹出层
      rewarddialogVisible: false,
      // 分页数据
      rewardtotal: 0,
      rewardcurrentPage: 1,
      rewardpageSize: 10,
      //query
      rewardquery: {
        keywords: "",
        class_id: "0",
        lowPrice: "",
        heightPrice: "",
        order_by: ""
      },
      rewardtableData: [],
      rewardloading: false,
      options: [],
      optionLoading: false,
      priceArr: [],
      rewardid: "",
      rewarddetail: ""
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取等级列表
    async getList() {
      this.loading = true;
      const res = await warList({
        page: this.currentPage,
        limit: this.pageSize
      });
      this.loading = false;
      console.log(res);
      this.total = res.count;
      this.tableData = res.data;
      this.tableData.forEach(item => {
        if (item.add_time == 0) {
          item.add_time = "-";
        } else {
          item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
        if (item.update_time == 0) {
          item.update_time = "-";
        } else {
          item.update_time = parseTime(
            item.update_time,
            "{y}-{m}-{d} {h}:{i}:{s}"
          );
        }
      });
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current;
      this.getList();
    },
    // 编辑
    handleEdite(row) {
      console.log(row);
      this.title = "编辑";
      this.form.experience = row.experience;
      this.form.grade = row.grade;
      this.form.win_info = row.win_info;
      this.form.id = row.id;
      this.drawer = true;
    },
    // 新增等级
    addList() {
      this.title = "添加";
      this.drawer = true;
    },
    handleClose(done) {
      const form = {
        grade: "",
        experience: "",
        win_info: [
          {
            type: 1,
            win_type: "",
            goods_id: "",
            data: "",
            coupon_id: ""
          },
          {
            type: 2,
            win_type: "",
            goods_id: "",
            data: "",
            coupon_id: ""
          }
        ]
      };
      this.form = form;
      done();
    },
    // 新增特殊奖励
    addReward() {
      const item = {
        type: 2,
        win_type: "",
        goods_id: "",
        data: "",
        coupon_id: ""
      };
      this.form.win_info.push(item);
    },
    // 删除特殊奖励
    delReward() {
      if (this.form.win_info.length == 2) {
        this.$message("已经是最小数据量了");
        return;
      }
      this.form.win_info.pop();
    },
    onSubmit() {
      console.log(this.form);
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.title == "添加") {
            const res = await addWarList({ ...this.form });
            console.log(res);
            if (res.st === 1) {
              this.resetForm("form");
              const form = {
                grade: "",
                experience: "",
                win_info: [
                  {
                    type: 1,
                    win_type: "",
                    goods_id: "",
                    data: "",
                    coupon_id: ""
                  },
                  {
                    type: 2,
                    win_type: "",
                    goods_id: "",
                    data: "",
                    coupon_id: ""
                  }
                ]
              };
              this.form = form;
              this.getList();
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.drawer = false;
            } else {
              console.log(res);
              this.$message.error("添加失败");
            }
          } else {
            const res = await editWarList({ ...this.form });
            console.log(res);
            if (res.st === 1) {
              this.resetForm("form");
              const form = {
                grade: "",
                experience: "",
                win_info: [
                  {
                    type: 1,
                    win_type: "",
                    goods_id: "",
                    data: "",
                    coupon_id: ""
                  },
                  {
                    type: 2,
                    win_type: "",
                    goods_id: "",
                    data: "",
                    coupon_id: ""
                  }
                ]
              };
              this.form = form;
              this.getList();
              this.$message({
                message: "编辑成功",
                type: "success"
              });
              this.drawer = false;
            } else {
              console.log(res);
              this.$message.error("编辑失败");
            }
          }
        }
      });
    },
    // 优惠券弹出层
    async chooseCoupon(index) {
      await this.getCouponList();
      this.theIndex = index;
      this.couponid = this.form.win_info[index].coupon_id;
      this.coupondialogVisible = true;
    },
    couponhandleClose(done) {
      done();
    },
    async getCouponList() {
      this.couponloading = true;
      const res = await couponList({
        page: this.couponcurrentPage,
        limit: this.couponpageSize,
        keywords: this.couponquery.keywords,
        type: this.couponquery.type
      });
      this.couponloading = false;
      console.log(res);
      this.coupontotal = res.count;
      this.coupontableData = res.data;
    },
    // 搜索列表
    couponqueryAsk() {
      console.log(this.couponquery);
      this.couponcurrentPage = 1;
      this.getCouponList();
    },
    couponqueryReset() {
      this.resetForm("couponquery");
      this.coupontotal = 0;
      this.couponcurrentPage = 1;
      this.couponpageSize = 10;
      this.couponquery.keywords = "";
      this.couponquery.type = "0";
      this.getCouponList();
    },
    //分页改变
    couponcurrentChange(current) {
      this.cpuponcurrentPage = current;
      this.getCouponList();
    },
    couponhandleSelectionChange(val) {
      console.log(val);
      this.coupondetail = val;
      this.couponid = val.id;
    },
    couponInfo() {
      this.form.win_info[this.theIndex].coupon_id = this.couponid;
      this.form.win_info[this.theIndex].coupon_info = this.coupondetail;
      this.coupondialogVisible = false;
    },
    //选择奖品弹出层
    async chooseReward(index) {
      await this.getBoxRewardList();
      await this.getBoxRewardTypeList();
      this.theIndex = index;
      this.rewardid = this.form.win_info[index].goods_id;
      this.rewarddialogVisible = true;
    },
    //获取奖品列表
    async getBoxRewardList() {
      this.rewardloading = true;
      const res = await boxRewardList({
        page: this.rewardcurrentPage,
        limit: this.rewardpageSize,
        class_id: this.rewardquery.class_id,
        price: this.priceArr,
        keywords: this.rewardquery.keywords,
        order_by: this.rewardquery.order_by
      });
      this.rewardloading = false;
      this.rewardtotal = res.count;
      this.rewardtableData = res.data;
      console.log(res);
    },
    rewardhandleClose(done) {
      done();
    },
    //获取奖品分类列表
    async getBoxRewardTypeList() {
      this.optionLoading = true;
      const res = await categoryList({
        page: "1",
        limit: "999",
        keywords: ""
      });
      this.optionLoading = false;
      this.options = res.data;
      console.log(res);
    },
    // 搜索列表
    rewardqueryAsk() {
      // 不可以一个有值一个没值
      if (!this.rewardquery.lowPrice && !this.rewardquery.heightPrice) {
        console.log("meiy");
        console.log(this.rewardquery);
        this.priceArr = [];
        this.rewardcurrentPage = 1;
        if (typeof this.rewardquery.class_id != "string") {
          this.rewardquery.class_id = this.rewardquery.class_id[
            this.rewardquery.class_id.length - 1
          ];
        }
        this.getBoxRewardList();
      } else if (this.rewardquery.lowPrice && this.rewardquery.heightPrice) {
        console.log("you");
        this.priceArr = [
          this.rewardquery.lowPrice,
          this.rewardquery.heightPrice
        ];
        console.log(this.rewardquery);
        if (typeof this.rewardquery.class_id != "string") {
          this.rewardquery.class_id = this.rewardquery.class_id[
            this.rewardquery.class_id.length - 1
          ];
        }
        this.rewardcurrentPage = 1;
        this.getBoxRewardList();
      } else if (!this.rewardquery.lowPrice || !this.rewardquery.heightPrice) {
        this.$message.error("请输入价格区间");
      }
    },
    rewardqueryReset() {
      this.resetForm("rewardquery");
      this.rewardtotal = 0;
      this.rewardcurrentPage = 1;
      this.rewardpageSize = 10;
      this.rewardquery.keywords = "";
      this.rewardquery.class_id = "0";
      this.rewardquery.lowPrice = "";
      this.rewardquery.heightPrice = "";
      this.priceArr = [];
      // this.query.order_by = "";
      this.getBoxRewardList();
    },
    //分页改变
    rewardcurrentChange(current) {
      this.rewardcurrentPage = current;
      this.getBoxRewardList();
    },
    // 排序
    rewardsortChange({ column, prop, order }) {
      if (order == "descending") {
        this.query.order_by = prop + "," + "desc";
        this.getBoxRewardList();
      } else if (order == "ascending") {
        this.query.order_by = prop + "," + "asc";
        this.getBoxRewardList();
      }
    },
    rewardhandleSelectionChange(val) {
      console.log(val);
      this.rewarddetail = val;
      this.rewardid = val.id;
    },
    rewardInfo() {
      this.form.win_info[this.theIndex].goods_id = this.rewardid;
      this.form.win_info[this.theIndex].goods_info = this.rewarddetail;
      this.rewarddialogVisible = false;
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  ::v-deep .el-form {
    display: flex;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
</style>